import _ from 'lodash';
import React, {Component} from 'react';
import {StyleSheet, ScrollView} from 'react-native';
import {
  Colors,
  View,
  Text,
  ColorPicker,
  ColorPalette,
  ColorName,
  ColorInfo,
  TouchableOpacity,
  ColorPickerDialog,
} from 'react-native-ui-lib';
import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
import {TestCase, TestSuite} from '@rnoh/testerino';

interface State {
  color: string;
  textColor?: string;
  customColors: string[];
  paletteChange: boolean;
  backgroundColor: string;
  showPicker: boolean;
}

const INITIAL_COLOR = Colors.$backgroundPrimaryHeavy;
// prettier-ignore
const colors = [
  '#20303C', '#43515C', '#66737C', '#858F96', '#A3ABB0', '#C2C7CB', '#E0E3E5', '#F2F4F5',
  '#3182C8', '#4196E0', '#459FED', '#57a8ef', '#8fc5f4', '#b5d9f8', '#daecfb', '#ecf5fd',
  '#00AAAF', '#32BABC', '#3CC7C5', '#64D4D2', '#8BDFDD', '#B1E9E9', '#D8F4F4', '#EBF9F9',
  '#00A65F', '#32B76C', '#65C888', '#84D3A0', '#A3DEB8', '#C1E9CF', '#E8F7EF', '#F3FBF7',
  '#E2902B', '#FAA030', '#FAAD4D', '#FBBD71', '#FCCE94', '#FDDEB8', '#FEEFDB', '#FEF7ED',
  '#D9644A', '#E66A4E', '#F27052', '#F37E63', '#F7A997', '#FAC6BA', '#FCE2DC', '#FEF0ED',
  '#CF262F', '#EE2C38', '#F2564D', '#F57871', '#F79A94', '#FABBB8', '#FCDDDB', '#FEEEED',
  // '#8B1079', '#A0138E', '#B13DAC', '#C164BD', '#D08BCD', '#E0B1DE', '#EFD8EE', '#F7EBF7'
];

class ColorPickerScreen extends Component<{}, State> {
  state: State = {
    color: INITIAL_COLOR,
    textColor: Colors.$textDefaultLight,
    customColors: [],
    paletteChange: false,
    backgroundColor: Colors.$backgroundDefault,
    showPicker: false,
  };

  onDismiss = () => {
    console.log(`screen onDismiss`);
  };

  onSubmit = (color: string, textColor: string) => {
    const {customColors} = this.state;
    customColors.push(color);
    this.setState({
      color,
      textColor,
      customColors: _.clone(customColors),
      paletteChange: false,
    });
  };

  onValueChange = (value: string, colorInfo: ColorInfo) => {
    this.setState({
      color: value,
      textColor: colorInfo?.tintColor,
      paletteChange: false,
    });
  };

  onPaletteValueChange = (value: string, colorInfo: ColorInfo) => {
    this.setState({
      color: value,
      textColor: colorInfo?.tintColor,
      paletteChange: true,
    });
  };

  render() {
    const {color, textColor, customColors, paletteChange, backgroundColor} =
      this.state;
    const paletteValue = paletteChange ? color || INITIAL_COLOR : undefined;
    const pickerValue = !paletteChange ? color || INITIAL_COLOR : undefined;

    const mappedColor = ColorName.name(color);
    const nearestColor = mappedColor[0];
    const colorName = mappedColor[1];
    const isMapped = mappedColor[2] ? 'Mapped' : 'Not mapped';

    return (
      <TestSuite name="ColorPicker, ColorPalette组件">
        <TestCase itShould="设置ColorPalette的onValueChange">
          <View>
            <View bg-$backgroundDefault>
              <Text text60 marginL-20 marginB-4 marginT-24>
                Theme Color
              </Text>
              <Text marginL-20>Choose a color for your place’s theme.</Text>
              <ColorPalette
                value={paletteValue}
                onValueChange={this.onPaletteValueChange}
                colors={colors}
                backgroundColor={backgroundColor}
                containerWidth={330}
              />
            </View>
            <View center bg-$backgroundDefault marginV-10>
              <Text text60 margin-10 style={{color}}>
                Selected Color: {color}
              </Text>
              <View
                center
                marginB-10
                style={{height: 50, width: 200, backgroundColor: color}}>
                <Text text60 style={{color: textColor}}>
                  {color}
                </Text>
              </View>
            </View>
            <View marginV-10 bg-$backgroundDefault>
              <Text center text60 marginT-10>
                Color Name
              </Text>
              <View
                spread
                row
                // margin-10
                paddingR-10
                style={{backgroundColor: nearestColor, overflow: 'hidden' }}>
                <Text margin-5 text70 style={{color: textColor}}>
                  {nearestColor}
                </Text>
                <Text margin-5 text60 style={{color: textColor}}>
                  {colorName}
                </Text>
                <Text margin-5 text70 style={{color: textColor}}>
                  {isMapped}
                </Text>
              </View>
            </View>
            <ColorPicker
              initialColor={color}
              colors={customColors}
              onDismiss={this.onDismiss}
              onSubmit={this.onSubmit}
              onValueChange={this.onValueChange}
              value={pickerValue}
              animatedIndex={0}
              backgroundColor={backgroundColor}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 Color Picker Dialog">
          <View padding-20 >
          <View center>
            <TouchableOpacity
              margin-10
              center
              style={{
                width: 60,
                height: 60,
                borderWidth: 1,
                borderRadius: 30,
                backgroundColor: color,
              }}
              onPress={() => this.setState({showPicker: true})}>
              <Text>Press</Text>
            </TouchableOpacity>
          </View>
          <ColorPickerDialog
            visible={this.state.showPicker}
            initialColor={color}
            key={color}
            onDismiss={() => this.setState({showPicker: false})}
            onSubmit={this.onSubmit}
          />
          </View>
        </TestCase>
        
      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.$backgroundNeutralLight,
  },
});

export default gestureHandlerRootHOC(ColorPickerScreen);
